//fd265d
import React, {Component} from 'react';
import {Image,TouchableOpacity,StyleSheet,View} from 'react-native';
import {scaleSize} from '../../utils/screen';
import FontText from './FontText';
import PropTypes from 'prop-types';

export default class StoreMenu extends Component {
    render() {
        let {text,icon,isActive = false,defaultIcon,activeIcon,imgStyle = {}} = this.props;
        return (
            <TouchableOpacity 
                activeOpacity = {0.8}
                onPress = {()=>this.onPress()}
                style = {[styles.box,{borderTopColor:isActive?"#fd265d":"rgba(0,0,0,0)"}]}>
                <View style = {styles.menuIcon}>
                    {
                        isActive
                        ?<Image source = {activeIcon} style = {[styles.icon,imgStyle]} />
                        :<Image source = {defaultIcon} style = {[styles.icon,imgStyle]} />
                    }
                </View>
                <FontText style = {[styles.text,{color:isActive?"#fd265d":"#909090"}]} font={'medium'}>{text}</FontText>
            </TouchableOpacity>
        );
    }
    onPress(){
        let {onPress} = this.props;
        onPress && onPress();
    }
}

const styles = StyleSheet.create({
    box:{
        height:scaleSize(80),
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: scaleSize(30),
        borderTopWidth: 3,
    },
    text:{
        fontSize: scaleSize(32),
        paddingRight: scaleSize(18),
    },
    menuIcon:{
        paddingHorizontal:scaleSize(18),
    },
    icon:{
        width:scaleSize(31),
        height:scaleSize(31)
    }
})